<template>
  <div>
    <el-form label-width="80px" size="mini">
      <el-form-item label="设备">
        <div v-if="item.deviceId">{{item.deviceName}}</div>
        <el-button-group>
          <el-button icon="el-icon-search" @click="deviceSelectorVisible=true">选择</el-button>
          <el-button v-if="item.deviceId" icon="el-icon-delete" @click="handleDelete">清除</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>

    <device-selector v-if="deviceSelectorVisible"
                     @close="deviceSelectorVisible=false"
                     @select="handleDeviceSelect"
    ></device-selector>

  </div>

</template>
<script>
  import DataSourceBtn from '../../dataSource/button';
  import Uploader from '../../designer/components/uploader';
  import BorderStyle from '../styles/border';
  import DeviceSelector from '@/views/components/DeviceSelector';

  export default {
    name: 'vpd-device2-style',
    components: {
      DataSourceBtn,
      Uploader,
      BorderStyle,
      DeviceSelector
    },
    props: {
      item: {
        type: Object
      }
    },
    data() {
      return {
        deviceSelectorVisible: false
      }
    },
    methods: {
      handleDeviceSelect(device) {
        this.item.deviceId = device.id;
        this.item.deviceCode = device.code;
        this.item.deviceName = device.name;
        this.deviceSelectorVisible = false;
      },
      handleDelete(){
        this.item.deviceId = null;
        this.item.deviceCode = null;
        this.item.deviceName = null;
      }
    }
  }
</script>
